/*
  学习目标：生命周期-卸载阶段
  1. componentWillUnMount
  2. 场景: 做清除的动作, 请定时器/ 解绑事件
  注意:
    完整的生命周期中, 挂载和卸载只会执行一次

*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    money: 1000,
    isShow: true,
  };

  render() {
    const { money, isShow } = this.state;
    return <div>{isShow && <Child></Child>}</div>;
  }
}

class Child extends React.Component {
  state = {
    count: 10,
  };

  handleResize = () => {
    console.log('窗口改变了');
  };
  // 挂载后监听窗口的改变事件
  componentDidMount() {
    console.log(' componentDidMount ----->  ');
    window.addEventListener('resize', this.handleResize);
  }

  // 卸载时清除掉监听的窗口改变事件
  render() {
    console.log('123  ----->  ', 123);
    return (
      <>
        <h1>Child -</h1>
        <button
          onClick={() => {
            this.setState({ count: this.state.count + 1 });
          }}
        >
          点我
        </button>
      </>
    );
  }

  componentWillUnmount() {
    console.log('componentWillUnmount执行了  ----->  ');
    window.removeEventListener('resize', this.handleResize);
  }
}
